<template>
	<el-dialog v-model="commentDialogVisible" title="评论" width="720" align-center center>
		<div>
			<el-row class="mt15 border-bottom pb10 mb10">
				<el-col :span="24" v-for="(item,index) in message.resetDynamicData" :key="index">
					<el-form-item :label="item.label+'：'" prop="time" :label-width="60" style="margin-bottom: 0;">
						<span>{{item.content}}</span>
					</el-form-item>
				</el-col>
			</el-row>	
			<el-form ref="form" :model="form" :rules="rules" :inline="true" class="mt30" :label-width="90">
				<el-form-item label="评论内容" prop="commentContent" style="margin-right: 0;" :label-width="95">
					<el-input
						v-model="form.commentContent"
						style="box-shadow: none;"
						:rows="5"
						type="textarea"
						placeholder="请输入评论内容"
						 resize="none"
						:input-style="{background:'#F7F8FA',borderRaduis:'15px',boxShadow:'none',width:'590px'}"
					  />
				</el-form-item>
				<!-- <div class="flex col-center row-between mt10">
					<span class="fb fs16 color333"><b class="color-red">*</b>参考资料</span>
					<el-button type="primary" style="background: #4DACB1;border: 1px solid #4DACB1;height: 32px;"
						@click="addInfoDialog()">
						添加
					</el-button>
				</div> -->
				<!-- <div>
					<div class="fs14 mt20" style="line-height: 45px;">
						<el-row class="border-bottom">
						   <el-col :span="4" class="text-center bg-FAFAFA fb color333">类别</el-col>
						   <el-col :span="20" class="color333 fb bg-FAFAFA pl30">名称</el-col>
						</el-row>
						<el-row class="row-center"  v-if="selectArr.length == 0">
							<div>暂无数据</div>
						</el-row>	
						<el-row v-else class="border-right  border-bottom" v-for="(item,i) in selectArr" :key="i">
						   <el-col :span="4" class="border-right text-center bg-F5F7FA fb color333">{{item.typeName}}</el-col>
						   <el-col :span="19" class="main-color pl20">{{item.recordName}}</el-col>
						</el-row>
					</div>	
				</div> -->
				<div class="fb fs16 mt10 color333 mb20 mt30 pl20">创建下次跟进任务</div>
				<el-form-item label="跟进时间" prop="followupTime" style="margin-right: 20px;">
					<el-date-picker
						v-model="form.followupTime"
						type="datetime"
						placeholder="请选择"
						size="large"
						style="width: 240px;"
						@change="change2"
					  />
				</el-form-item>
				<el-form-item label="跟进内容" prop="followupContent" style="margin-right: 0;">
					<el-input v-model="form.followupContent" size="large" placeholder="请输入" style="width: 240px;"/>
				</el-form-item>
				<el-form-item label="跟进人员" prop="staffId" style="margin-right: 20px;">
					<el-select v-model="form.staffId" placeholder="客户类型" size="large" style="width: 240px">
					  <el-option
					      v-for="dict in teamOptions"
					      :key="dict.userId"
					      :label="dict.userName"
					      :value="dict.userId"/>
					</el-select>
				</el-form-item>
				<el-form-item label="跟进提醒" prop="reminderType" style="margin-right: 0;">
					<el-select v-model="form.reminderType" placeholder="请选择" size="large" style="width: 240px;">
						<el-option v-for="dict in bus_followup_task" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="提醒方式" prop="reminderMethod">
					<el-radio-group v-model="form.reminderMethod" style="width: 340px">
						<el-radio v-for="dict in bus_reminder_method" :key="dict.value" :label="dict.value"
							:value="dict.value" size="large">
							{{dict.label}}
						</el-radio>	
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer text-right">
				<el-button class="cancelSubBtn" @click="commentDialogVisible = false">取消</el-button>
				<el-button type="primary"  class="mainSubBtn"
					@click="addComment('form')">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 添加资料	 -->
	<addInfoDialog ref="infoDialog" @addFunc="addFunc"></addInfoDialog>
</template>

<script>
	import { customerList } from "@/api/business/customer";
	import { listProduct } from "@/api/business/product";
	import { addFollowupComment } from "@/api/business/followup";
	import { Calendar, Search } from '@element-plus/icons-vue'
	import { getUserInfo } from '@/utils/ruoyi'
	import {
	 getUserListData
	} from "@/api/business/teamOpportunity";
	import addInfoDialog  from './addInfo.vue'
	export default {
		components:{
			addInfoDialog
		},
		props:{
			message:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				bus_followup_task:this.useDict("bus_followup_task").bus_followup_task,
				bus_reminder_method:this.useDict("bus_reminder_method").bus_reminder_method,
				commentDialogVisible: false,
				form:{
					recordId:'',//跟进任务id
					commentContent:'',//评论内容
					nextFollowupRecord:{
						followupTime:'',//跟进时间
						followupContent:'',//跟进内容
						staffId:'',//跟进人员
						reminderMethod:'',//提醒方式
						reminderType:'',//任务提醒
					},
					followupTime:'',//跟进时间
					followupContent:'',//跟进内容
					staffId:'',//跟进人员
					reminderMethod:'',//提醒方式
					reminderType:'',//任务提醒
					evaluationExampleList:[],//参考资料
					// {
					// 	type:'',//类型
					// 	recordId:'',//关联类型的id
					// 	recordName:'',//关联类型的名称
					// },
				},
				rules: {
				  commentContent: [
				    { required: true, message: "不能为空", trigger: "blur" },
				  ],
				  // followupTime:[
				  //   { required: true, message: "不能为空", trigger: "change" },
				  // ],
				  // staffId:[
				  //   { required: true, message: "不能为空", trigger: "change" },
				  // ],
				},
				pageNum:'',
				pageSize:'',
				total:'',
				list:[],
				loading:true,
				teamOptions:'',
				selectArr:[],//选中的参考资料
			}
		},
		mounted() {
			this.getList1()
			this.getUserList()
		},
		methods:{
			// 添加参考资料
			addInfoDialog(){
				this.$refs.infoDialog.open()
			},
			/**
			 * 获取本人和下级用户数据
			 */
			getUserList() {			 
			    //获取自己和同部门的用户信息
			    getUserListData().then(response => {
			      this.teamOptions = response.data;
			    });			  
			},			
			open(){
				this.commentDialogVisible = true
			},
			close(){
				this.commentDialogVisible = false
			},
			// 请求列表数据
			getList1(){
				this.loading = true;
				customerList(this.queryParams).then(response => {
				  this.list = response.rows;
				  this.total = response.total;
				  this.loading = false;
				});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
			  // ids.value = selection.map(item => item.jobId);
			  // single.value = selection.length != 1;
			  // multiple.value = !selection.length;
			},
			// 添加资料
			addFunc(e){
				this.selectArr = e
			},
			change2(e){
				this.form.nextFollowupRecord.followupTime = this.filterTime(e)
				this.form.nextFollowupTime = this.filterTime(e)
			},
			filterTime(dateString){
				// 使用 Date.parse 解析字符串为时间戳（毫秒），然后创建 Date 对象
				const date = new Date(Date.parse(dateString));
				
				// 提取各个部分
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并补零
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				
				// 拼接成所需的格式
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				
				return formattedDate
			},
			//添加评论
			addComment(formName){
				this.form.recordId = this.message.id
				this.form.nextFollowupRecord.reminderMethod = this.form.reminderMethod
				this.form.nextFollowupRecord.reminderType = this.form.reminderType
				this.form.nextFollowupRecord.staffId = this.form.staffId
				this.form.nextFollowupRecord.followupContent = this.form.followupContent
				this.form.evaluationExampleList = this.selectArr
				console.log(this.form,'this.queryParams')
				// return false;
				
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// if(this.selectArr.length == 0){
						// 	this.$message.error('请选择参考资料');
						// 	return false
						// }
						addFollowupComment(this.form).then(res=>{
							this.$emit('recordList')
							this.close()
						})
					}
				 }) 
				
			}
		}
	}
</script>

<style>
	.tabActive{
		background-color: #4DACB1!important;
		border: 1px solid #4DACB1!important;
		color: #fff!important;
	}
	.avatar-uploader .el-upload {
	  background: #F7F8FA;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	  width: 110px;
	  height: 110px;
	  text-align: center;
	  line-height: 22px;
	  color: #8c939d;
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  text-align: center;
	}
</style>